<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/site.css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/viewport.js"></script>
    <script src="js/jquery-1.8.3.js"></script>

</head>

<body>
<div id="app">
    <header class="padding-35">
        <div class="logo">
            <img src="imgs/logo.png" alt="">
        </div>
        <a v-if="!user" href="login.html">你好，请登录</a>
        <a v-if="!user" href="register.html">注册</a>
        <a v-if="user">欢迎，{{user.account}}</a>
        <div class="menu">
            <img src="imgs/menu.png" alt="">
        </div>
    </header>
    <!-- 遮罩层 -->
    <div class="zzc none"></div>
    <!-- nav -->
    <div class="nav none">
        <div class="navImg">
            <img src="imgs/photo.png" alt="">
            <p>健康美食网</p>
        </div>
        <div class="navList">
            <ul>
                <li class="isPage">
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="menuIndex.html">菜谱</a>
                </li>
                <li>
                    <a href="food.html">食材</a>
                </li>
                <li>
                    <a href="category.html">菜系</a>
                </li>
                <li>
                    <!-- <a href="javascript:;">健康生活</a> -->
                    <a href="healthy.html">健康生活</a>
                </li>
                <li>
                    <a href="special.html">专题</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="search">
        <div class="searchBox padding-35">
            <input type="text" placeholder="搜索菜谱" v-model="name" @keyup.enter="querylikeByname">
            <img src="imgs/fangdajing.png" alt="" >
        </div>
    </div>
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="content padding-35">
        <div class="menuBox">
            <div class="menuTit">菜谱大全</div>
            <div class="menuListBox clearfix">
                <div class="menuList1 fl" id="cuicine">
                    <span class="isSelect">家常菜谱</span>
                    <span>孕妇菜谱</span>
                    <span>儿童食谱</span>
                    <span>老人食谱</span>
                    <!-- <span>家常菜谱</span>
                    <span>孕妇菜谱</span>
                    <span>儿童食谱</span>
                    <span>老人食谱</span> -->
                </div>
                <div class="menuListMore fr">
                    <a href="menuIndex.html">更多<i>></i></a>
                </div>
            </div>
            <div class="menuItemBox">
                <div class="recipesItemList">
                    <ul class="clearfix">
                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="recipesItemList none">
                    <ul class="clearfix">
                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="recipesItemList none">
                    <ul class="clearfix">

                        <li v-for="c in cuisine">
                            <div class="itemOne">
                                <img :src="c.cimg" alt="">
                            </div>
                            <div class="itemTwo">
                                <a href="javascript:;" @click.prevent="tz('cuisineDetail.html?cid=',c.cid)">{{c.cname}}</a>
                            </div>
                            <p class="itemThree">
                                <span><img src="imgs/dianxin.jpg" alt="">热菜</span>
                                <span class="fr">难度<i>:</i>初中水平</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="menuBox">
            <div class="menuTit">热门菜系</div>
            <div class="menuListBox clearfix">
                <div class="menuList2 fl" id="category">
                    <span class="isSelect">鲁菜</span>
                    <span>川菜</span>
                    <span>粤菜</span>
                    <span>苏菜</span>
                    <span>闽菜</span>
                    <span>浙菜</span>
                </div>
                <div class="menuListMore fr">
                    <a href="category.html">更多<i>></i></a>
                </div>
            </div>
            <div class="hotMenu">
                <div class="hotMenuBox">
                    <ul class="clearfix">
                        <li v-for="cg in category">
                            <a href="javascript:;" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                                <img :src="cg.cimg" alt="" >
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="hotMenuBox none">
                    <ul class="clearfix">
                        <li v-for="cg in category">
                            <a href="javascript:;" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                                <img :src="cg.cimg" alt="">
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="hotMenuBox none">
                    <ul class="clearfix">
                        <li v-for="cg in category" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                            <a href="javascript:;">
                                <img :src="cg.cimg" alt="">
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
        <div class="menuBox">
            <div class="menuTit">食材大全</div>
            <div class="menuListBox clearfix">
                <div class="menuList3 fl" id="food">
                    <span class="isSelect">时令食材</span>
                    <span>肉禽蛋</span>
                    <span>水产类</span>
                    <span>蔬果类</span>
                </div>
                <div class="menuListMore fr">
                    <a href="food.html">更多<i>></i></a>
                </div>
            </div>
            <div class="hotMenu">
                <div class="menuAll ">
                    <ul class="clearfix">
                        <li v-for="f in food">
                            <a href="javascript:;" @click.prevent="tz('foodDetail.html?cid=',f.fid)">
                                <img :src="f.fimg" alt="">
                                <p>{{f.fname}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="menuAll none">
                    <ul class="clearfix">
                        <li v-for="f in food">
                            <a href="javascript:;" @click.prevent="tz('foodDetail.html?cid=',f.fid)">
                                <img :src="f.fimg" alt="">
                                <p>{{f.fname}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="menuAll none">
                    <ul class="clearfix">
                        <li v-for="f in food">
                            <a href="javascript:;" @click.prevent="tz('foodDetail.html?cid=',f.fid)">
                                <img :src="f.fimg" alt="">
                                <p>{{f.fname}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="news">
            <div class="newsTit">
                <span>热门食谱</span>
                <a class="fr" href="healthy.html">更多<i>></i></a>
            </div>
            <div class="newsList">
                <ul>
                    <li v-for="a in article">
                        <img class="fl" :src="a.aimg" alt="">
                        <div class="newsItem" @click.prevent="tz('articleDetail.html?cid=',a.aid)">
                            <p>{{a.aname}}</p>
                            <p>
                                <span><i class="iconfont icon-yonghu"></i>{{a.author}}</span>
                                <span class="fr">{{a.atime}}</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <footer>
        <p>版权所有：版权所有：健康美食网 WWW.JKMEISHI.COM</p>
        <p>Copyright 2011-2018 备案号:鄂ICP备11013833号-4</p>
    </footer>
</div>
<script src="js/public.js"></script>
<script>
    // var swiper = new Swiper('.swiper-container', {
    //     // loop模式：会在原本slide前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来是循环的。
    //     loop: true,
    //     // autoplay设置为true启动自动切换，并使用默认的切换设置。
    //     autoplay: {
    //         delay: 2500,
    //         // disableOnInteraction
    //         //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    //         //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    //         //操作包括触碰(touch)，拖动，点击pagination等
    //         disableOnInteraction: false,

    //     }
    // });
    let bra_se = document.querySelector(".swiper-container div");
    let img_index = 1;
    // 启动定时器
    window.setInterval(()=>{
        //transition-duration   属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
        // transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
        bra_se.style.cssText = `transition-duration: 0.8s; transform: translateX(-${100*img_index}vw);left: 0px;`;
        if( img_index % 3 == 0 ){
            img_index = 0;
            setTimeout(()=>{
                bra_se.style.cssText = `transform: translateX(0vw);left: 0px`;
            }, 1500);
        }
        img_index++;
    }, 3500);
    var v = new Vue({
        el : "#app",
        data : {
            user : null,
            cuisine :　{},
            category : {},
            food : {},
            name : "",
            article : {}

        },
        created(){
            axios.get("getLoginedUser").then(res=>{
                if (res.data.code==1){
                    this.user = res.data.data;
                }
            });
            this.querybytype("家常菜谱");
            this.querybyctype("鲁菜")
            this.querybyftype("时令食材")
            this.queryArticle();


        },
        methods:{
            querybytype(type){
                console.log(type )
                axios.post("healthy/cuisine/querybytype", qs.stringify({type : type})).then(res=>{
                    this.cuisine = res.data.data;
                    console.log(this.cuisine);
                })
            },
            querybyftype(type){
                console.log(type)
                axios.post("healthy/food/querybyftype", qs.stringify({type : type})).then(res=>{
                    this.food = res.data.data;
                    console.log(this.food);
                })
            },
            querybyctype(type){
                console.log(type)
                axios.post("healthy/category/querybyctype", qs.stringify({type : type})).then(res=>{
                    this.category = res.data.data;
                    console.log(this.category);
                })
            },
            querylikeByname(){
                axios.post("healthy/cuisine/querylikebyname", qs.stringify({name : this.name})).then(res=>{
                    this.cuisine = res.data.data;
                    console.log(this.cuisine);
                })
            },

            queryArticle(){
                axios.post("healthy/article/querybytype").then(res=>{
                    this.article = res.data.data;
                    console.log(this.article);
                })
            },
            tz(detail,id) {
                // location.href ="cuisineDetail.html?cid="+id;
                location.href = detail + id;
            }

        }
    })

    $(function () {
            $('.menuList1 span').click(function () {
                var type = $(this).text();
                v.querybytype(type);
            })
        })

    $(function () {
            $('.menuList2 span').click(function () {
                var type = $(this).text();
                v.querybyctype(type);
            })
        })

    $(function () {
            $('.menuList3 span').click(function () {
                var type = $(this).text();
                v.querybyftype(type);
            })
        })

    // $(function (){
    //     $('.clearfix li').click(function () {
    //
    //     })
    // })
</script>
</body>

</html>